import { Controls, Canvas } from '@storybook/blocks';

import * as SkeletonStories from './skeleton.stories';

# Skeleton

`Skeleton` is a placeholder component that is used while the content is loading.

<Canvas of={SkeletonStories.DefaultStory} />

## Props

<Controls of={SkeletonStories.DefaultStory} />

### Width Height

Use the `width` and `height` props to specify the width and height of the `Skeleton` component. It accepts both numbers and strings.

<Canvas of={SkeletonStories.WidthHeight} />

```jsx
import { Skeleton } from '../../component-library';

<Skeleton height={32} width={300} />
<Skeleton height={16} width={250} />
<Skeleton height={16} width={250} />
```

### Is Loading

Use the `isLoading` prop to control whether to show the skeleton loading state or the actual content. When `true`, shows skeleton with hidden children. When `false`, shows just the children content.

<Canvas of={SkeletonStories.IsLoading} />

```jsx
import { Skeleton, Text, TextVariant } from '../../component-library';

<Skeleton width="max-content" isLoading={!isLoaded}>
  <Text variant={TextVariant.headingMd}>Content that loads</Text>
</Skeleton>;
```

### Border Radius

Use the `borderRadius` prop and `BorderRadius` enum to specify the border radius of the `Skeleton` component.

<Canvas of={SkeletonStories.BorderRadiusStory} />

```jsx
import { BorderRadius } from '../../../helpers/constants/design-system'
import { Skeleton } from '../../component-library';

<Skeleton borderRadius={BorderRadius.full} height={32} width={32} />
<Skeleton borderRadius={BorderRadius.pill} height={32} width="100%" />
<Skeleton borderRadius={BorderRadius.LG} height={32} width="100%" />
<Skeleton borderRadius={BorderRadius.MD} height={32} width="100%" />
<Skeleton borderRadius={BorderRadius.SM} height={32} width="100%" />
<Skeleton borderRadius={BorderRadius.XS} height={32} width="100%" />
```
